<template>
  <view class="forum-list-page">
    <scroll-view
      class="forum-list-scroll"
      :scroll-y="true"
      :refresher-enabled="true"
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
      @scrolltolower="onLoadMore"
      style="height: 100vh"
    >
      <view
        v-for="(item, idx) in forumList"
        :key="item.id || idx"
      >
        <ForumCard
          :info="item"
          :likeAvatars="item.likeAvatars"
          @click="goDetail"
        />
      </view>
      <view
        v-if="loading"
        class="forum-list-loading"
        >加载中...</view
      >
      <view
        v-if="noMore"
        class="forum-list-nomore"
        >没有更多了</view
      >
    </scroll-view>
  </view>
</template>

<script>
  import ForumCard from './components/ForumCard.vue'
  export default {
    name: 'ForumListPage',
    components: { ForumCard },
    data() {
      return {
        forumList: [],
        page: 1,
        pageSize: 10,
        loading: false,
        noMore: false,
        refreshing: false
      }
    },
    onLoad() {
      this.loadForumList(true)
    },
    methods: {
      async loadForumList(reset = false) {
        if (reset) {
          this.page = 1
          this.noMore = false
          this.forumList = []
        }
        if (this.loading || this.noMore) return
        this.loading = true
        try {
          await new Promise((resolve) => setTimeout(resolve, 800))
          const mockData = this.generateMockData()
          this.forumList = reset ? mockData : [...this.forumList, ...mockData]
          this.noMore = mockData.length < this.pageSize
          if (!this.noMore) this.page++
        } catch (error) {
          console.error('加载论坛列表失败:', error)
          this.noMore = true
        } finally {
          this.loading = false
          this.refreshing = false
        }
      },
      // 生成模拟数据
      generateMockData() {
        return Array.from({ length: this.pageSize }, (_, i) => ({
          id: (this.page - 1) * this.pageSize + i + 1,
          user: {
            avatar: '',
            nickname: '小可爱',
            signature: '生活不止眼前的美好，还有诗和远方'
          },
          title: '饮茶养生亦养心',
          content:
            '惊蛰节气后，阳气上升，气温回暖，雨水增多，正是饮茶养生的好时节。茶能清心明目，润喉生津，助于身心健康。',
          images: [{ url: '' }, { url: '' }, { url: '' }],
          shareCount: 853,
          commentCount: 309,
          likeCount: 2992,
          likeAvatars: ['', '', '', '']
        }))
      },
      onRefresh() {
        this.refreshing = true
        this.loadForumList(true)
      },
      onLoadMore() {
        this.loadForumList()
      },
      goDetail(item) {
        uni.navigateTo({ url: `/pagesA/forum/detail?id=${item.id || 1}` })
      }
    }
  }
</script>

<style scoped lang="scss">
  .forum-list-page {
    background: #f8f8f8;
    min-height: 100vh;
  }
  .forum-list-scroll {
    height: 100vh;
    overflow: auto;
    padding: 0;
  }
  .forum-list-loading,
  .forum-list-nomore {
    text-align: center;
    color: #999;
    font-size: 28rpx;
    padding: 30rpx 0;
  }
</style>
